<!--支付单详情页面-->
<template>
  <div class="ticket-check-box">
    <el-container class="ticket-check-content">
      <el-main class="ticketcheck-main">
        <el-form
          ref="formName"
          inline
          :label-width="labelWidth"
          class="ticketcheck-main-box">
          <el-row
            v-for="(item,index) in ticektcheckList"
            :key="index"
            class="ticketcheck-form">
            <el-col
              :span="it.span"
              v-for="(it,idx) in item"
              :key="idx">
              <el-form-item
                :class="it.otherClass"
                :label="it.label"
              >{{ paymentrecord[it.prop] || "--" }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-header
        class="base-header"
        height="1px" />
      <el-main class="money">
        产品总数：
        <span class="num">{{ paymentrecord.prodTotalCount }}</span>；
        品种数量：
        <span class="num">{{ paymentrecord.prodVarietyCount }}</span>；
        金额合计（元）：
        <span class="moneynum">{{ paymentrecord.prodTotalAmount | getFormatterPrice }}</span>
      </el-main>
      <!-- 列表 -->
      <div style="height: 100%; overflow: auto;">
        <el-editable
          v-loading="submitLoading"
          :data="paymentrecord.itemList.content"
          height="400"
          :columns="ticketcheckcolumsData"
        />
      </div>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="paymentrecord.itemList.totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import { ticektcheckList, ticketcheckcolumsData } from './const'
import { hospitalSettleQuaryHospPayDetail } from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import { getFormatterPrice } from '@const/filter'
export default {
  components: { ElEditable },
  props: {
    paymentrecord: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      labelWidth: '160px',
      ticektcheckList,
      submitLoading: false,
      ticketcheckcolumsData, // 列表字段
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0 // 总共的条数
    }
  },
  filters: {
    getFormatterPrice
  },
  methods: {
    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.$axios
        .$post(hospitalSettleQuaryHospPayDetail, {
          receiptPayId: this.paymentrecord.receiptPayId,
          page: curPage,
          pageSize: this.pageSize
        })
        .then(res => {
          this.paymentrecord.itemList.content = res.payload.itemList.content
        })
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/var.less';
.ticket-check-box {
  margin-bottom: 40px;

  .ticket-check-content {
    height: 100%;
    overflow: auto;
    /deep/.tabs .tabs-item {
      &.active {
        .item-font {
          font-size: 14px;
          transform: scale(1.3);
          transition: all 0.3s ease;
        }
      }
    }

    .ticketcheck-main {
      border: 1px solid #dfe2e8;
      .ticketcheck-main-box {
        background-color: #fff;

        &:last-child {
          margin-bottom: 0;
        }

        .ticketcheck-form {
          font-size: 14px;

          .el-form-item {
            display: flex;

            .el-form-item__label {
              font-size: 14px;
            }

            .el-form-item__content {
              font-size: 14px;
              color: @defaultFontColor;
              font-weight: 400;
              flex: 1;

              .el-date-editor {
                width: 100%;
              }

              .el-select {
                width: 100%;
              }
            }
          }
        }
      }
    }

    .money {
      .num {
        color: #007eff;
      }
      .moneynum {
        color: red;
      }
    }

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
